<template>
  <el-dialog v-model="visible" title="楼盘选择" class="w-[750px] rounded-[15px]" :destroy-on-close="!props.isShowLou">
    <div>
      <el-input v-model="initParams.name" class="w-150px" placeholder="请输入楼盘名字"></el-input>
    </div>
    <div class="flex flex-row flex-wrap">
      <div
        v-for="p in louPanConfig.list"
        :key="p.id"
        @click="insertCard(p)"
        class="cursor-pointer mr-10px mt-10px bg-[#67C23A] px-8px py-2px rounded-[10px] text-[#fff] item"
      >
        {{ p.name }}
      </div>
    </div>
    <div class="mt-30px flex flex-row justify-end">
      <el-pagination
        small
        background
        layout="prev,pager,next,total"
        :total="louPanConfig.total"
        :default-current-page="initParams.pageNum"
        :page-size="initParams.pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import { getLouPanList as getLouPanListApi } from "@/api/modules/loupan";

interface Props {
  isShowLou?: boolean;
}

const props = withDefaults(defineProps<Props>(), { isShowLou: true });

const visible = ref(false);

const emits = defineEmits(["card"]);

const acceptParams = () => {
  visible.value = true;
};

const initParams = reactive({ pageSize: 30, pageNum: 1, name: "", isAudit: 0, status: 0, grounding: 0 });

watch(
  () => initParams,
  () => {
    if (props.isShowLou) {
      getLouPanList();
    }
  },
  { deep: true }
);

const louPanConfig = ref();

const getLouPanList = async () => {
  if (!props.isShowLou) return;
  const { data } = await getLouPanListApi(initParams);
  const newData = data as any;
  louPanConfig.value = newData;
};

onBeforeMount(() => {
  Promise.all([getLouPanList()]);
});

const pageChange = (val: number) => {
  initParams.pageNum = val;
};

const insertCard = (p: any) => {
  emits("card", p);
  visible.value = false;
};

defineExpose({ acceptParams });
</script>

<style scoped lang="scss">
.item {
  &:hover {
    background-color: rgba($color: #529b2e, $alpha: 100%);
    transition: 0.3s all;
  }
}
</style>
